<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('全国薪资列表')"/>
    <script th:src="@{/js/jquery.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/js/echarts2.min.js}"></script>
    <title>融资测试页面</title>
</head>
<body style="background-color:#f3f3f4 ">

<div class="container" style="width: 97%;margin-top: 10px">
    <div class="row">
        <div class="col-sm-6"  style="margin:1%;background-color: white;width: 48%">
            <div style="height: 50px;font-size: 20px;line-height: 60px;">公司融资情况</div>
            <hr style="margin: 0px">
            <div id="finance_one" style="height: 550px;margin:10px"></div>
        </div>
        <div class="col-sm-6"  style="margin:1%;background-color: white;width: 48%" >
            <div style="height: 50px;font-size: 20px;line-height: 60px;">公司融资情况</div>
            <hr style="margin: 0px">
            <div id="finance_two" style="height: 550px;margin:10px"></div>

        </div>
    </div>
</div>

<script>
    //finance_one
    var chartDom1 = document.getElementById('finance_one');
    var myChart1 = echarts.init(chartDom1);
    var option;

    option = {
        title: {
            text: 'Referer of a SQL',
            subtext: 'Fake Data',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: '50%',
                data: [
                    { value: 1048, name: '不需要融资' },
                    { value: 735, name: '上市公司' },
                    { value: 580, name: '未融资' },
                    { value: 484, name: 'A轮' },
                    { value: 300, name: 'B轮' },
                    { value: 280, name: 'D轮及以上' },
                    { value: 200, name: 'C轮' },
                    { value: 80, name: '天使轮' },
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    option && myChart1.setOption(option);







    //finance_two
    var chartDom2 = document.getElementById('finance_two');
    var myChart2 = echarts.init(chartDom2);
    var dataname = [
        '不需要融资',
        '上市公司',
        '未融资',
        'A轮',
        'B轮',
        'C轮',
        'D轮及以上',
        '天使轮'
    ];
    var datvalue = [2545, 1599, 1000, 950, 500, 260, 240, 130];
    var color = ['#4B96F3', '#10C6A6', '#F2AF4B', '#FF4D4F', '#AA7AF1'];
    var colorList = [];
    for (var i = 0; i < dataname.length; i++) {
        if (i <= 4) {
            colorList[i] = color[i];
        } else {
            colorList[i] = color[i % 5];
        }
    }

    var data = [];
    for (var i = 0; i < dataname.length; i++) {
        data.push({
            value: datvalue[i],
            name: dataname[i],
            itemStyle: {
                color: colorList[i],
            },
        });
    }

    option = {
        legend: {
            show: true,
            data: dataname,
            // selectedMode: 'single',
            itemGap: 5,
            borderRadius: 5,
            symbolSize: 'auto',
        },
        tooltip: {
            trigger: 'item',
            formatter: '{b}: {c}',
        },
        series: [
            {
                type: 'treemap',
                width: '100%',
                height: '100%',
                breadcrumb: {
                    show: false,
                },

                label: {
                    normal: {
                        show: true,
                        textStyle: {
                            color: '#fff',
                            fontSize: 16,
                        },
                        formatter: function (params) {
                            return params.data.name + '\n' + params.data.value
                        }
                    },
                },
                itemStyle: {
                    normal: {
                        show: true,
                        borderWidth: 1,
                        borderColor: '#fff',
                    },
                    emphasis: {
                        label: {
                            show: true,
                        },
                    },
                },
                data: data,
            },
        ],
    };

    option && myChart2.setOption(option);


</script>

</body>
</html>